React-[建立開發環境篇]-安裝vite & 將vite專案打包並部署

安裝Vite

安裝vite與建置環境之前，要先確認你電腦是否有安裝node.js

建議在v16版本以上會比較穩定
指令 ＄ node -v
記得切換node版本到最新版
$nvm use v18
or
將新版的穩定版設定為default版本指令
$nvm alias default v18.14.1

確認安裝node之後，（官網建議安裝的）輸入指令指令

＄npm create vite@latest

如果是第一次安裝會有一些問題需要回答，安裝後，然後照著下面的指令進入該專案資料夾

• 打開專案資料夾會是這樣
  

• 輸入cmd + /開啟終端機，繼續輸入第二行指令
  $npm install
  這項指令會安裝整個專案所需要的相關套件與依賴項目等

• 就出現node_modules資料夾
  

• 接著在終端機，繼續輸入第三行指令 ：
  $npm dev

這指令等是把開發環境運行起來
在package.json中會描述這個專案包含了哪些相關套件，依賴項等，也就是開發所需要的環境
在其中會有"scripts" 腳本這項

將 Vite 專案打包並部署

github pages可以把靜態網頁部署到網路

複製指令並貼在專案資料夾的終端機

github剛剛的頁面按重新整理就會是以下樣貌

產生dist資料夾，等等要部署到github pages

在終端機寫下以下指令：

$npm run build

就會產生以下的dist資料夾

把編譯好的dist資料夾部署到github

• gh-pages工具可以讓我們的專案快速的部署到github pages，剛剛動作都執行好之後，回到專案下的終端機，下載這個工具，輸入以下指令：

  $npm install gh-pages
  

安裝好之後，進到package.json寫入腳本指令，等一下會把dist資料夾進行部署到github pages網頁上，-d是“deploy”縮寫，後面資料夾名寫dist

接著立即執行這個deploy的腳本

出現這個訊息代表部署github pages成功

• 按下enter後就會開始進行推送部署至github儲存庫
  
• 點選右方的setting → 畫面左方尋找 pages關鍵字 →Branch /gh-pages →點選網址 就可以看到自己部署的靜態網頁

更改錯誤的網址路徑：把開發路徑 與 產品路徑 分開

• 回到專案資料夾
  

• 即將來調整程式碼：
  

• 

• 調整好並分開了『開發路徑』和『產品路徑』，先更新產品『dist資料夾』，輸入指令$npm run build

• 

• 更新了產品dist資料夾，來更新『開發的資料夾』，輸入指令$npm run dev

• 

• 

• 更新了開發的資料夾，將更新過的gh-pages資料夾deploy部署到 github pages網站，輸入指令$npm run deploy

• 

按下github 網站上的pages網址，就出現畫面了

接下來就可以開始React的開發之旅了